<template>
    <div>
        <div class="list">
            <adItem v-for="(item, index) in list" :key="index" :item="item" @opItem="opItem($event, item)" opType="edit"></adItem>
        </div>
        <pub-list-end :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>
        <div class="wfull h200"></div>
        <div class="add_btn" @click="$navigate.to('/pages/advert/newAd?type=' + pageType)">
            <i class="icon-plus fs34 mar-r20"></i>
            {{
                {
                    'link': '新增链接广告',
                    'product': '新增商品广告',
                    'img': '新增图片广告',
                    'mini': '新增小程序广告',
                }[pageType]
            }}
        </div>
    </div>
</template>

<script>
import { getUserAdverts, editUserAdvertReq } from '@/request/ad'
import adItem from '@/components/pages/adItem'
import adSelecter from '@/components/pages/adSelecter'
export default {
    components: {
        adItem,
        adSelecter
    },
    data() {
        return {
            pageType: 'link',
            list: [],
            scroll: {
                page: 1,
                size: 30,
                loading: false,
                max: false,
                noData: false,
            },
        }
    },
    onLoad(options) {
        if(options.type) {
            this.pageType = options.type;
            uni.setNavigationBarTitle({
                title: {
                    'link': '链接广告',
                    'product': '商品广告',
                    'img': '图片广告',
                    'mini': '小程序广告',
                }[this.pageType]
            });
        } 
    },
    onShow() {
        this.onRefresh()
    },
    onReachBottom() {
        this.onInfinite()
    },
    methods: {
        getList(complete) {
            getUserAdverts({
                advertType: {
                    'link': '01',
                    'product': '00',
                    'img': '02',
                    'mini': '03',
                }[this.pageType],
                keyWord: '',
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
            }, { complete }).then(res => {
                this.list = this.scroll.page == 1 ? res.data.list : this.list.concat(res.data.list)
                this.scroll.max = this.list.length >= res.data.total
                this.scroll.noData = res.data.total == 0
            })
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.list = []
            this.getList(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getList(() => {
                this.scroll.loading = false
            })
        },
        opItem(type, item) {
            if(type == 'modify') {
                this.$navigate.to(`/pages/advert/newAd?type=${this.pageType}&id=${item.id}` )
            } else if(type == 'delete') {
                this.$interact.modal({
                    title: '提示',
                    content: '是否删除广告？',
                    showCancel: true,
                }).then(action => {
                    if(action.confirm) {
                        editUserAdvertReq({
                            isDel: '01',
                            id: item.id
                        }).then(res => {
                            this.onRefresh()
                        })
                    }
                })

            }
        }
    }

}
</script>

<style lang="less" scoped>
.list{
    // .item{
    //     width: 100%;
    //     background: #fff;
    //     padding: 30rpx 30rpx 0;
    //     margin-bottom: 20rpx;
    //     position: relative;
    //     &.in_use{
    //         &::after{
    //             content: "使用中";
    //             position: absolute;
    //             top: 15rpx;
    //             left: -35rpx;
    //             height: 40rpx;
    //             line-height: 40rpx;
    //             width: 150rpx;
    //             .align(center);
    //             transform: rotate(-45deg);
    //             font-size: 24rpx;
    //             background: @mainColor;
    //             color: #fff;

    //         }

    //     }
    //     .ad_info{
    //         padding: 30rpx;
    //         display: flex;
    //         border: 1px solid #ddd;
    //         border-radius: 20rpx;
    //         image{
    //             width: 180rpx;
    //             height: 180rpx;
    //             border-radius: 20rpx;
    //             margin-right: 20rpx;
    //         }
    //         .ad_des{
    //             flex: 1;
    //             height: 180rpx;
    //             width: 1px;
    //             position: relative;
    //             p{
    //                 width: 100%;
    //                 font-size: 32rpx;
    //                 height: 130rpx;
    //             }
    //             span{
    //                 padding: 0 20rpx;
    //                 height: 50rpx;
    //                 line-height: 48rpx;
    //                 border-radius: 25rpx;
    //                 color: @mainColor;
    //                 background: #fff;
    //                 border: 1px solid @mainColor;
    //                 font-size: 28rpx;
    //                 text-align: center;
    //                 position: absolute;
    //                 bottom: 6rpx;
    //                 right: 0;

    //             }
    //         }
    //     }
    //     .op{
    //         width: 100%;
    //         display: flex;
    //         align-items: center;
    //         justify-content: space-between;
    //         height: 100rpx;
    //         padding-bottom: 10rpx;
    //         .btns{
    //             .btn{
    //                 width: 140rpx;
    //                 height: 60rpx;
    //                 line-height: 60rpx;
    //                 border-radius: 30rpx;
    //                 border: 1px solid #ddd;
    //                 font-size: 28rpx;
    //                 text-align: center;
    //                 margin-left: 20rpx;
    //             }
    //         }   
    //     }
    // }
}

.add_btn{
    position: fixed;
    bottom: 30rpx;
    left: 35rpx;
    width: 680rpx;
    height: 100rpx;
    .align(center);
    z-index: 2;
    border-radius: 50rpx;
    background: @mainColor;
    color: #fff;
    font-size: 40rpx;
    font-weight: bold;
}

</style>